<template>
  <div>
    <a-form :form="form" class="form">
      <a-card :bordered="false" title="必填信息" :loading="loading1">
        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="大厦名称">
              <a-input
                type="textarea"
                placeholder="请输入大厦名称"
                v-decorator="[
                  'title',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入大厦名称',
                      },
                      { max: 255, message: '不得超过255个字符' },
                    ],
                    initialValue:formData.title
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="排序(越大越往前显示)">
              <a-input
                placeholder="请输入排序"
                v-decorator="[
                  'sort',
                  {
                    rules: [{ validator: checkNumber }],
                    initialValue:formData.sort
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="状态">
              <a-switch
                checked-children="上架"
                un-checked-children="下架"
                v-decorator="[
                  'shelves',
                  { valuePropName: 'checked', initialValue: formData.shelves?true:false },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>
 <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="咨询电话">
              <a-input
                type="textarea"
                placeholder="请输入咨询电话"
                v-decorator="[
                  'hotline',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入咨询电话',
                      },
                      {validator: checkPhone },
                    ],
                    initialValue:formData.hotline
                  },
                ]"
              />
            </a-form-item>
          </a-col>

        
        </a-row>
      </a-card>

      <a-card
        class="card"
        :title="'区域'"
        :bordered="false"
        :loading="loading3||loading1"
        style="margin-top: 20px"
      >
        <a-row>
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="街道">
              <a-select
                @change="handleChange"
                show-search
                v-decorator="[
                  'street_id',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择街道',
                      },
                    ],
                    initialValue: Number(formData.street_id),
                  },
                ]"
                placeholder="请选择街道"
              >
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in areaListSelList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="社区">
              <a-select
                show-search
                v-decorator="[
                  'community_id',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请选择社区',
                      },
                    ],
                    initialValue: Number(formData.community_id),
                  },
                ]"
                placeholder="请选择社区"
              >
                <a-select-option
                  :value="item.id"
                  v-for="(item, index) in areaCommunity"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card
        class="card"
        :title="'封面图片'"
        :bordered="false"
        :loading="loading1"
        style="margin-top: 20px"
      >
        <a-col :lg="{ span: 7 }" :sm="24">
          <oneImage ref="oneImage" :path="'building'" :imageUrl="formData.cover_image?imageUrl(formData.cover_image):undefined" />
        </a-col>
      </a-card>

      <a-card
        class="card"
        :title="'轮播图'"
        :bordered="false"
        :loading="loading1"
        style="margin-top: 20px"
      >
        <manyImage ref="manyImage" :path="'building'"   :imagesArray="formData.many_image?formData.many_image.split(','):[]"  />
      </a-card>

      <a-card
        class="card"
        :title="'位置信息'"
        :loading="loading1"
        :bordered="false"
        style="margin-top: 20px"
      >
        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="经度">
              <a-input
                placeholder="请点击地图"
                disabled
                v-decorator="[
                  'longitude',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请点击地图',
                      },
                    ],
                    initialValue:formData.longitude
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="纬度">
              <a-input
                placeholder="请点击地图"
                disabled
                v-decorator="[
                  'latitude',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请点击地图',
                      },
                    ],
                     initialValue:formData.latitude
                  },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="详细地址(点击地图)">
              <a-input
                type="textarea"
                placeholder="请输入详细地址"
                v-decorator="[
                  'address',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入详细地址',
                      },
                      { max: 255, message: '不得超过255个字符' },
                    ],
                    initialValue:formData.address
                  },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <Map @spot="getMap" @getAddress="getAddress" :lngDefault="Number(formData.longitude)" :latDefault="Number(formData.latitude)"></Map>
      </a-card>

      <a-card
        class="card"
        :title="'大厦简介(不填则不显示)'"
        :loading="loading1"
        :bordered="false"
        style="margin-top: 20px"
      >
        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="竣工时间">
              <a-input
                placeholder="请输入竣工时间"
                type="textarea"
                v-decorator="[
                  'completion_time',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                   initialValue:formData.completion_time },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="层高">
              <a-input
                placeholder="请输入层高"
                type="textarea"
                v-decorator="[
                  'height',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                    initialValue:formData.height },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="层数">
              <a-input
                placeholder="请输入层数"
                type="textarea"
                v-decorator="[
                  'layerNumber',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                   initialValue:formData.layerNumber
                   },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="物业费">
              <a-input
                placeholder="请输入物业费"
                type="textarea"
                v-decorator="[
                  'propertyFee',
                  { rules: [{ max: 255, message: '不得超过255个字符' }], 
                   initialValue:formData.propertyFee
                  },
                  
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="车位">
              <a-input
                placeholder="请输入车位"
                type="textarea"
                v-decorator="[
                  'stall',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                   initialValue:formData.stall },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="车位月租金">
              <a-input
                placeholder="请输入车位月租金"
                type="textarea"
                v-decorator="[
                  'stall_money',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                     initialValue:formData.stall_money },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="空调">
              <a-input
                placeholder="请输入空调"
                type="textarea"
                v-decorator="[
                  'air',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                  initialValue:formData.air
                  
                   },
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="空调费">
              <a-input
                placeholder="请输入空调费"
                type="textarea"
                v-decorator="[
                  'air_cost',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                  initialValue:formData.air_cost },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="空调开放时间">
              <a-input
                placeholder="请输入空调开放时间"
                type="textarea"
                v-decorator="[
                  'air_open_time',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                   initialValue:formData.air_open_time
                   },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
            <a-form-item label="电梯">
              <a-input
                placeholder="请输入电梯"
                type="textarea"
                v-decorator="[
                  'elevator',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                  initialValue:formData.elevator },
                  
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="网络">
              <a-input
                placeholder="请输入网络"
                type="textarea"
                v-decorator="[
                  'network',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                      initialValue:formData.network },
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :lg="{ span: 7, offset: 1 }" :sm="24">
            <a-form-item label="入驻企业">
              <a-input
                placeholder="请输入入驻企业"
                type="textarea"
                v-decorator="[
                  'in_enterprise',
                  { rules: [{ max: 255, message: '不得超过255个字符' }],
                  initialValue:formData.in_enterprise
                   },
                ]"
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row class="form-row">
          <a-col :lg="{ span: 7 }" :sm="24">
             <a-form-item label="物业">
              <a-input
                placeholder="请输入物业"
                type="textarea"
                v-decorator="['property',{ rules: [{ max: 255, message: '不得超过255个字符' }] },]"
              />
            </a-form-item>
             </a-col>
          <a-col :lg="{ span: 15,offset:1 }" :sm="24">
            <a-form-item label="描述">
              <a-input
                placeholder="请输入描述"
                type="textarea"
                :rows="8"
                v-decorator="['describe',{initialValue:formData.describe}]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
 <a-card
      class="card"
      :title="'自定义'"
      :bordered="false"
      :loading="loading1"
      style="margin-top: 20px"
    >
      <FormEdit ref="custom" :columns_="customColumn" :dataSource_="custom"></FormEdit>
    </a-card>
      <footer-tool-bar style="z-index: 8">
        <a-button type="primary" @click="validate" :loading="loading2"
          >提交</a-button
        >
      </footer-tool-bar>
    </a-form>
  </div>
</template>

<script>
const customColumn = [
  {
    title: "字段",
    dataIndex: "field",
    dateType:"textarea",
    key: "field",
    width: "20%",
    scopedSlots: { customRender: "field" },
  },
  {
    title: "描述",
    dataIndex: "content",
    dateType:"textarea",
    key: "content",
    width: "60%",
    scopedSlots: { customRender: "content" },
  },
];
import FooterToolBar from "@/components/tool/FooterToolBar";
import Map from "@/components/map";
import FormEdit from "@/components/form/FormEdit";

import { areaSelList } from "@/services/area";
import oneImage from "@/components/uploadImages/oneImage";
import manyImage from "@/components/uploadImages/manyImage";
import {
  buildingEdit,
  buildingSelOne,
  buildingManyImage,
  buildingCoverImage,
} from "@/services/building";
export default {
  name: "BuildingEdit",
  components: {
    FooterToolBar,
    Map,
    FormEdit,
    oneImage,
    manyImage,
  },
  data() {
    return {
      formData:{},
      form: this.$form.createForm(this),
      areaListSelList: [],
      areaCommunity: [],
      customColumn:customColumn,
      custom:[],
      loading2: false,
      loading3: false,
      loading1: true,
      id:"",
      //   visible: false,
      // checkUserNameRepeat: checkUserNameRepeat,
    };
  },
  async created() {
    // this.closeTabs.$emit('test','msg');
    // this.adminRoleListLoad();

    this.loading3 = true;
    let areaListSelListData = await areaSelList();
    if (areaListSelListData.code == 200) {
      this.areaListSelList = areaListSelListData.data;
    }

    this.id = this.$route.query.building_id
    this.loading3 = false;
    //  console.log(areaListSelList)
  },
  watch: {
     "$route.query.building_id": function () {
      let building_id = this.$route.query.building_id;
      if (building_id && building_id != this.id) {
        this.id = building_id;
      }
      //重新调用请求数据的方法，刷新页面数据
    },
    id(newValue, oldValue) {
      this.loading1 = true;
      buildingSelOne({ id: newValue })
        .then((res) => {
          if (res.code == 200) {
            this.formData = res.data;
            this.custom =  this.formData.custom?JSON.parse( this.formData.custom):[]
            this.handleChange(this.formData.street_id)

            this.loading1 = false
          }
        })
       
    },
  },
  methods: {
    handleChange(e) {

      for (let i = 0; i < this.areaListSelList.length; i++) {
        if (this.areaListSelList[i].id == e) {
          this.areaCommunity = this.areaListSelList[i]["child"];
        }
      }
      this.form.setFieldsValue({ community_id: undefined });
    },
    getMap(obj) {
      this.form.setFieldsValue(obj);
    },
    getAddress(e) {
      this.form.setFieldsValue(e);
    },
    async validate() {
      // alert()

      //  let
      // console.log();
      //   console.log(tree.checkedKeys);
      const { form, $message, $router, $refs,id } = this;
      const this_ = this;

      // await this.checkUserName("userName");
      //  console.log(form.getFieldsValue());

      form.validateFields((err) => {
        if (err) {
          $message.error("信息填写有误");
          return;
        } else {
          // console.log(form.getFieldsValue());
          this.$confirm({
            title: "确定要编辑吗?",
            // content: h => <div style="color:red;">Some descriptions</div>,
            async onOk() {
              this_.loading2 = true;
              let formData = form.getFieldsValue();

              let oneImage = $refs.oneImage.getFile(); //封面图片

              if (oneImage.has("file")) {
                if (!oneImage.get("file")) {
                  formData["cover_image"] = "";
                } else {
                  let fileRes = await buildingCoverImage(oneImage);
                  if (fileRes.code == 200) {
                    formData["cover_image"] = fileRes.data.url;
                  } else {
                    $message.error("封面图片上传失败");
                    return;
                  }
                }
              }
              let manyImage = $refs.manyImage.getFile(); //多图
              formData["many_image"] = manyImage.oldImageStr
              if (manyImage.formDataImg) {
                let fileRes = await buildingManyImage(manyImage.formDataImg);
                if (fileRes.code == 200) {
                  formData["many_image"] +=  (formData["many_image"]?',':'')+fileRes.data;
                } else {
                  $message.error("轮播图上传失败");
                  return;
                }
              } 
              
              formData["custom"] =   JSON.stringify(
                $refs.custom.getArray()
              ); //大厦简介

              let res = await buildingEdit({ formData:formData,conditions:{id:id} });
              if (res.code == 200) {
                $message.success(res.message);
                this_.closeTabs.$emit("closeTabs");
                $router.push("/findShop/officeBuildings/buildingList");
              }

              this_.loading2 = false;
            },
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.aSelect {
  display: flex;
  width: 100%;
  justify-content: space-between;
  /* border: 1px solid red; */
  align-items: center;
}

.card {
  margin-bottom: 24px;
}

.form {
  .form-row {
    margin: 0 -8px;
    // display: flex;
    // justify-content: space-between;
    //    display: flex;
    // justify-content: space-between;
  }
  .ant-col-md-12,
  .ant-col-sm-24,
  .ant-col-lg-6,
  .ant-col-lg-8,
  .ant-col-lg-10,
  .ant-col-xl-8,
  .ant-col-xl-6 {
    padding: 0 8px;
  }
}
.topRow button {
  margin-top: 5px;
  margin-left: 10px;
}

.portraitImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  //   border: 1px solid red;
}

#portraitImage {
  //   width: 100%;
  //   height: 100%;
}

.portraitShow {
  width: 70%;
  height: 0;
  padding-bottom: 70%;
  border: 1px dashed #ced0d3;
  // margin-left: 20px;
  position: relative;
  margin: auto;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  cursor: pointer;
}
.plus-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 20px;
  transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
